<template>
    <div class="show-resume">
        <Resume v-if="!resumeImg" :applicant_id="applicant_id" ref="resume" @completeUpdate:resume="resumePreview"/>
        <img v-else ref="resume_img" class="resume-img">
        <!--基本信息-->
        <!--        <div class="resume-base-info">-->
        <!--            <div class="basic-info" >-->
        <!--              <h1>{{ userinfo.name }}</h1>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        工作经验-->
        <div class="resume-job-experience">
            <div class="job-experience" v-if="!editJobExperience">
                <h2>工作经验</h2>
                <ul>
                    <li v-for="jobExperience in jobExperienceList" :key="'job-experience'+jobExperience.id">
                        <img v-if="$store.state.onlyReadResume" class="icon"
                             :src="require('@/image/illustration/el-icon-company.png')"
                             style="width: 45px; height: 45px; float: left" />
                        <SymbolIcon v-else icon-class="el-icon-company" />
                        <div class="job-info">
                            <h3>
                                <span>工作过的公司：{{jobExperienceList.companyName}}</span>
                                <span>担任职务：{{ jobExperience.duty}}</span>
                                <span>
                    {{ jobExperience.startTime.split("-").slice(0,2).join(".") }}
                    &nbsp;-&nbsp;
                    {{ jobExperience.endTime.split("-").slice(0,2).join(".") }}
                </span>
                                <span>行业名：{{ jobExperience.industryName}}</span>
                            </h3>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--        教育经历-->
        <div class="resume-education">
            <div class="education" v-if="!editEducation">
                <h2>教育经历</h2>
                <ul>
                    <li v-for="education in educationList" :key="education.school_name ">
                        <img v-if="$store.state.onlyReadResume" class="icon"
                             :src="require('@/image/illustration/el-icon-school.png')"
                             style="width: 45px; height: 45px; float: left" />
                        <SymbolIcon v-else icon-class="el-icon-school" />
                        <div class="education-info">
                            <h3>
                                <span>{{ education.school_name }}</span>
                                <span>{{ education.education }}&nbsp;·
                    <span v-if="education.examination_flag === 'N'">非</span>统招&nbsp;·
                    <span v-if="education.fulltime_flag === 'N'">非</span>全日制
                    <el-divider direction="vertical"></el-divider>
                        专业{{ education.major }}
                    </span>
                                <span>
                    {{ education.start_date.split("-").slice(0,2).join(".") }}
                    &nbsp;-&nbsp;
                    {{ education.end_date.split("-").slice(0,2).join(".") }}</span>
                            </h3>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--        项目经历-->
        <div class="resume-project-experience">
            <div class="project-experience" v-if="!editProjectExperience">
                <h2>项目经历</h2>
                <ul>
                    <li v-for="projectExperience in projectExperienceList" :key="projectExperience.project_name ">
                        <img v-if="$store.state.onlyReadResume" class="icon"
                             :src="require('@/image/illustration/el-icon-project.png')"
                             style="width: 45px; height: 45px; float: left" />
                        <SymbolIcon v-else icon-class="el-icon-project" />
                        <div class="project-info">
                            <h3>
                                <span>项目名称：{{ projectExperience.title }}</span>
                                <span>我的职位：{{ projectExperience.duty }}</span>
                                <span>
                    {{ projectExperience.startTime.split("-").slice(0,2).join(".") }}
                    &nbsp;-&nbsp;
                    {{ projectExperience.endTime.split("-").slice(0,2).join(".") }}</span>
                            </h3>
                            <div class="project-description">
                                <h4>项目内容</h4>
                                <span>{{ projectExperience.content }} </span>
                            </div>
                            <div class="project-description">
                                <h4>我的职责</h4>
                                <span>{{ projectExperience.dutyDescription }}</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import Resume from "@/views/general/applicant/widget/Resume.vue";
    import html2canvas from "html2canvas";
    export default {
        name: "ShowResume",
        components: {Resume},
        props: {
            applicant_id: {
                type: String,
                required: true
            },
            // userinfo: {},
            jobExperienceList: [],
            educationList: [],
            projectExperienceList: [],
        },

        created() {
            this.initData();
            // this.$store.commit("setOnlyReadResume");
        },
        mounted() {
            this.resumePreview();
            // console.log(this.$refs.resume)
        },
        updated() {
            // console.log(this.$refs.img)
            this.$refs.resume_img.src = this.resumeImg;
        },
        destroyed() {
            this.$store.commit("recoverOnlyReadResume");
        },
        data() {
            return {
                resumeImg: ""
            }
        },
        methods: {
            // 简历转换为base64图片
            resumePreview(isComplete) {
                if (isComplete) {
                    this.$nextTick(() => {
                        html2canvas(this.$refs.resume.$el, {
                            background: null,
                        }).then((canvas) => {
                            console.log(canvas)
                            //将canvas转为base64格式
                            // console.log(canvas.toDataURL("image/png"));
                            this.resumeImg = canvas.toDataURL("image/png");
                        });
                    })
                }
            },
            async initData() {
                //获取个人
                let getProjectExperience = async () => {
                    const res = await this.$axios.request({
                        url: `web/ProjectExperience/ProjectExperience`,
                        method: "get",
                        params: {
                            userinfoId:this.$route.query.userinfoId
                        }
                    });
                    console.log(this.userinfoId);
                    console.log(res);
                    if (res) {
                        this.projectExperienceList = res.data;
                    }
                };
                await this.$axios.all([getProjectExperience()]);
            },

        },
    }
</script>

<style scoped>
    .resume-detail{
        position: absolute;
        top: -100vw;
        transform: translateY(-100%);
    }
    .resume-img{
        width: 100%;
    }
</style>
<style lang="less" scoped>
    .el-link-active{
        transition: .3s;
        &:hover{
            color: @mainColor;
        }
        &:active{
            color: @activeColor;
        }
    }

    @mainColor: #5dd5c8;
    @activeColor: #00c2b3;
    @background: #fff;
    @editBackground: #f8f9fc;
    @fontColor: #414a60;
    @salaryColor: #fb670f;
    @promptColor: #8d92a1;
    @borderColor: #dcdfe6;

    h2{
        font-size: 20px;
        padding-left: 20px;
        position: relative;
        &::before{
            content: "";
            display: block;
            width: 2px;
            height: 16px;
            position: absolute;
            border-radius: 3px;
            background: @activeColor;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        span{
            font-size: 15px;
            font-weight: normal;
            cursor: pointer;
            color: @activeColor;
            .el-link-active();
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            i{
                margin-right: 5px;
            }
        }
    }
    .content{
        margin-top: 30px;
        .job-experience-wrapper{
            padding: 10px;
            position: relative;
            &:hover{
                box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
                h3 span:last-of-type{
                    display: none;
                }
                .edit,.remove{
                    display: block;
                }
            }
            .edit,.remove{
                display: none;
                position: absolute;
                right: 10px;
                top: 10px;
                z-index: 1;
                &.edit{
                    right: 80px;
                }
            }
            .icon{
                font-size: 45px;
                float: left;
                & + div{
                    margin-left: 70px;
                }
            }
        }
    }
    .edit-title{
        font-size: 16px;
        font-weight: bold;
        color: @activeColor;
    }
    .edit-content{
        margin-top: 30px;
        .el-form-item{
            width: 50%;
            &:not(.edit-btn){
                display: inline-block;
            }
            &.editor-form-item{
                width: 100%;
            }
            &.date-form-item{
                width: 50%;
                .el-date-editor.el-input, .el-date-editor.el-input__inner{
                    width: 100%;
                }
                .start-date-form-item /deep/ .el-form-item__content{
                    margin-right: 10px !important;
                }
                .end-date-form-item /deep/ .el-form-item__content{
                    margin-left: 10px !important;
                }
            }
        }
    }
    .editDialog{
        padding: 30px 40px;
        background: @editBackground;
    }

    .resume-job-experience{
        font-size: 16px;
        .job-experience{
            .job-info{
                h3{
                    position: relative;
                    span:nth-child(1){
                        display: block;
                        font-size: 18px;
                        font-weight: bold;
                    }
                    span:nth-child(2){
                        display: block;
                        line-height: 32px;
                        color: @promptColor;
                        font-size: 16px;
                        font-weight: normal;
                    }
                    span:nth-child(3){
                        font-size: 16px;
                        font-weight: normal;
                        position: absolute;
                        right: 0;
                        top: 0;
                    }
                }
                p{
                    font-size: 14px;
                    line-height: 32px;
                    &:first-of-type{
                        margin-top: 15px;
                    }
                }
            }
        }
    }
</style>
<style lang="less" scoped>
    .el-link-active{
        transition: .3s;
        &:hover{
            color: @mainColor;
        }
        &:active{
            color: @activeColor;
        }
    }

    @mainColor: #5dd5c8;
    @activeColor: #00c2b3;
    @background: #fff;
    @editBackground: #f8f9fc;
    @fontColor: #414a60;
    @salaryColor: #fb670f;
    @promptColor: #8d92a1;
    @borderColor: #dcdfe6;

    h2{
        font-size: 20px;
        padding-left: 20px;
        position: relative;
        &::before{
            content: "";
            display: block;
            width: 2px;
            height: 16px;
            position: absolute;
            border-radius: 3px;
            background: @activeColor;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        span{
            font-size: 15px;
            font-weight: normal;
            cursor: pointer;
            color: @activeColor;
            .el-link-active();
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            i{
                margin-right: 5px;
            }
        }
    }
    .content{
        margin-top: 30px;
        .education-wrapper{
            padding: 10px;
            position: relative;
            &:hover{
                box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
                h3 >span:last-of-type{
                    display: none;
                }
                .edit,.remove{
                    display: block;
                }
            }
            .edit,.remove{
                display: none;
                position: absolute;
                right: 10px;
                top: 10px;
                z-index: 1;
                &.edit{
                    right: 80px;
                }
            }
            .icon{
                font-size: 45px;
                float: left;
                & + div{
                    margin-left: 70px;
                }
            }
        }
    }
    .edit-title{
        font-size: 16px;
        font-weight: bold;
        color: @activeColor;
    }
    .edit-content{
        margin-top: 30px;
        .el-form-item{
            width: 50%;
            &:not(.edit-btn){
                display: inline-block;
            }
            &.editor-form-item{
                width: 100%;
            }
            &.date-form-item{
                width: 50%;
                .el-date-editor.el-input, .el-date-editor.el-input__inner{
                    width: 100%;
                }
                .start-date-form-item /deep/ .el-form-item__content{
                    margin-right: 10px !important;
                }
                .end-date-form-item /deep/ .el-form-item__content{
                    margin-left: 10px !important;
                }
            }
        }
    }
    .editDialog{
        padding: 30px 40px;
        background: @editBackground;
    }

    .resume-education{
        font-size: 16px;
        .education{
            .education-info{
                h3{
                    position: relative;
                    > span:nth-child(1){
                        display: block;
                        font-size: 18px;
                        font-weight: bold;
                    }
                    > span:nth-child(2){
                        display: block;
                        line-height: 32px;
                        color: @promptColor;
                        font-size: 16px;
                        font-weight: normal;
                    }
                    > span:nth-child(3){
                        font-size: 16px;
                        font-weight: normal;
                        position: absolute;
                        right: 0;
                        top: 0;
                    }
                }
                > div{
                    margin-top: 20px;
                    h4{
                        font-weight: bold;
                        line-height: 32px;
                    }
                    p{
                        font-size: 14px;
                        line-height: 32px;
                    }
                }
            }
        }
    }
</style>
<style lang="less" scoped>
    .el-link-active{
        transition: .3s;
        &:hover{
            color: @mainColor;
        }
        &:active{
            color: @activeColor;
        }
    }

    @mainColor: #5dd5c8;
    @activeColor: #00c2b3;
    @background: #fff;
    @editBackground: #f8f9fc;
    @fontColor: #414a60;
    @salaryColor: #fb670f;
    @promptColor: #8d92a1;
    @borderColor: #dcdfe6;

    h2{
        font-size: 20px;
        padding-left: 20px;
        position: relative;
        &::before{
            content: "";
            display: block;
            width: 2px;
            height: 16px;
            position: absolute;
            border-radius: 3px;
            background: @activeColor;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        span{
            font-size: 15px;
            font-weight: normal;
            cursor: pointer;
            color: @activeColor;
            .el-link-active();
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            i{
                margin-right: 5px;
            }
        }
    }
    .content{
        margin-top: 30px;
        .project-experience-wrapper{
            padding: 10px;
            position: relative;
            &:hover{
                box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
                h3 span:last-of-type{
                    display: none;
                }
                .edit,.remove{
                    display: block;
                }
            }
            .edit,.remove{
                display: none;
                position: absolute;
                right: 10px;
                top: 10px;
                z-index: 1;
                &.edit{
                    right: 80px;
                }
            }
            .icon{
                font-size: 45px;
                float: left;
                & + div{
                    margin-left: 70px;
                }
            }
        }
    }
    .edit-title{
        font-size: 16px;
        font-weight: bold;
        color: @activeColor;
    }
    .edit-content{
        margin-top: 30px;
        .el-form-item{
            width: 50%;
            &:not(.edit-btn){
                display: inline-block;
            }
            &.editor-form-item{
                width: 100%;
            }
            &.date-form-item{
                width: 50%;
                .el-date-editor.el-input, .el-date-editor.el-input__inner{
                    width: 100%;
                }
                .start-date-form-item /deep/ .el-form-item__content{
                    margin-right: 10px !important;
                }
                .end-date-form-item /deep/ .el-form-item__content{
                    margin-left: 10px !important;
                }
            }
        }
    }
    .editDialog{
        padding: 30px 40px;
        background: @editBackground;
    }

    .resume-project-experience{
        font-size: 16px;
        .project-experience{
            .project-info{
                h3{
                    position: relative;
                    span:nth-child(1){
                        display: block;
                        font-size: 18px;
                        font-weight: bold;
                    }
                    span:nth-child(2){
                        display: block;
                        line-height: 32px;
                        color: @promptColor;
                        font-size: 16px;
                        font-weight: normal;
                    }
                    span:nth-child(3){
                        font-size: 16px;
                        font-weight: normal;
                        position: absolute;
                        right: 0;
                        top: 0;
                    }
                }
                > div{
                    margin-top: 20px;
                    h4{
                        font-weight: bold;
                        line-height: 32px;
                    }
                    p{
                        font-size: 14px;
                        line-height: 32px;
                    }
                    .el-link{
                        color: @fontColor;
                        .el-link-active();

                    }
                }
            }
        }
    }
</style>